<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '测试结果',
  },
}
</route>
<template>
  <!-- 退出提醒 -->
  <view class="commit-confirm">
    <view class="card-confirm">
      <view class="card-info" v-if="!isAccess">
        <view class="card-info-left">×</view>
        <view class="card-info-right">
          <view>
            您还有
            <text style="color: red">
              {{ pageData.result.examTestTimes - pageData.result.userTestTimes }}
            </text>
            次考试机会
          </view>
          <view style="margin-top: 20rpx">
            <text style="font-size: 65rpx; color: red">{{ pageData.result.userScore }}</text>
            分
          </view>
          <view style="margin-top: 20rpx">抱歉您未通过考试</view>
        </view>
      </view>
      <view class="card-info" v-if="isAccess">
        <view class="card-info-left">
          <uni-icons type="checkmarkempty" size="90" color="green"></uni-icons>
        </view>
        <view class="card-info-right">
          <view v-if="pageData.result.examTestTimes !== 0">
            您还有
            <text style="color: green">
              {{ pageData.result.examTestTimes - pageData.result.userTestTimes }}
            </text>
            次考试机会
          </view>
          <view style="margin-top: 20rpx">
            <text style="font-size: 65rpx; color: green">{{ pageData.result.userScore }}</text>
            分
          </view>
          <view style="margin-top: 20rpx">您已通过考试</view>
        </view>
      </view>
      <view class="confirm-buttons">
        <view class="cancel-btn-red" v-if="pageData.result.isGoON === 0" @click="examAgain">
          继续练习
        </view>
        <view class="cancel-btn-gray" v-if="pageData.result.isGoON !== 0">继续练习</view>
        <view class="submit-btn" @click="back">返回</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ExaminationResult,
  abandonExamTest,
  getUserExaminationInformation,
} from '@/service/exam/exam'

const isAccess = ref(true)
const pageData = reactive({
  result: {} as ExaminationResult,
  senduserId: 0,
})
const back = () => {
  if (pageData.result.isPass === 1 && pageData.result.isGoON === 0) {
    uni.showModal({
      title: '系统提示',
      content: '因为您已经通过测试，点击确定将会结束测试无法再次进入，是否确定？',
      success: function (res) {
        if (res.confirm) {
          abandonExamTest(pageData.senduserId)
          // 回到首页
          uni.reLaunch({ url: '/pages/index/index' })
          // uni.navigateTo({ url: '/pages/courseCenter/CourseInfo/CourseInfo' })
        }
      },
    })
  } else {
    uni.reLaunch({ url: '/pages/index/index' })
  }
}

const examAgain = () => {
  uni.navigateTo({ url: '/pages-sub/exam/examRoom?id=' + pageData.senduserId })
}

onLoad((option) => {
  console.log(option)
  // 从URL参数中获取考试ID
  if (option.id) {
    pageData.senduserId = parseInt(option.id)
    // 加载成绩
    getUserExaminationInformation(pageData.senduserId).then((res) => {
      if (res.code === 200) {
        pageData.result = res.data
        isAccess.value = res.data.isPass === 1
      } else {
        uni.showToast({
          title: res.message || '获取考试结果失败',
          icon: 'none',
        })
      }
    })
  } else {
    uni.showToast({
      title: '缺少考试ID参数',
      icon: 'none',
    })
  }
})
</script>

<style scoped lang="scss">
.commit-confirm {
  width: 100vw;
  height: 100vh;
  display: flex;

  .card-confirm {
    margin-top: 120rpx;
    width: 100%;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    .card-info {
      display: flex;
      .card-info-left {
        font-size: 250rpx;
        color: red;
        font-weight: bold;
        margin-top: -70rpx;
      }
      .card-info-right {
        margin-left: 30rpx;
      }
      .card-info-left-1 {
        font-size: 250rpx;
        color: #20e451;
        font-weight: bold;
        margin-top: -70rpx;
      }
      .card-info-right-1 {
        margin-left: 30rpx;
      }
    }
  }

  .confirm-title {
    font-size: 30rpx;
    color: #2725ab;
    text-align: center;
  }

  .confirm-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 40rpx;
  }

  .info-label {
    font-size: 25rpx;
    color: black;
    width: 160rpx;
  }

  .info-value {
    font-size: 25rpx;
    color: black;
  }

  .confirm-text {
    font-size: 30rpx;
    color: #2725ab;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .confirm-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 70rpx;
  }
  .cancel-btn,
  .submit-btn,
  .cancel-btn-red {
    width: 220rpx;
    height: 100rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
  }

  .cancel-btn {
    background-color: #e0e0e0;
    color: #333;
    margin-left: 80rpx;
  }

  .cancel-btn-red {
    background-color: #ff0000;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    margin-left: 80rpx;
  }

  .cancel-btn-gray {
    background-color: #e0e0e0;
    color: #999999;
    justify-content: center;
    align-items: center;
    margin-left: 80rpx;
  }

  .submit-btn {
    background-color: #060607;
    color: #fff;
    margin-right: 80rpx;
  }
}
</style>
